html{ font-size: 62.5%;}
body{ font-family: "Microsoft YaHei", "微软雅黑", "宋体", Arial; font-size: 1.4rem; font-size: 14px; color: #454545; line-height: 26px; letter-spacing: .03em;}
ul, ol, li{ padding: 0; margin: 0; list-style: none;}
a{ color: #565656; text-decoration: none; outline: none;}
a:hover, a:active, a:focus{ color: #0e82e7; text-decoration: none;}
label{ font-weight: normal;}
input{ font-family: "Microsoft YaHei", "微软雅黑", "宋体", Arial;}
/*img{ max-width: 100%;}*/

.clearfix:after, .clearfixlist li:after, .form-group:after{ content:"\0020"; display:block; clear:both; height:0; font-size:0; visibility: hidden;}
.clearfix, .clearfixlist li, .form-group{ zoom:1;}
.clear{ clear:both; display:block;}
.show-xs{ display: none;}
.fl{ float: left;}
.fr, .fr-md{ float: right;}
.center{ text-align: center;}
.lightgray{ color: #a6a6a6;}
.gray{ color: #d3d3d3;}
.red{ color: #f30600;}
.orange{ color: #f18e00;}
.bg-white{ background: #fff;}
.bg-lightgray{ background: #f7f7f7; }
.circle{ -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%;}

.font-16{ font-size: 16px;}
.font-18{ font-size: 18px;}
.font-28{ font-size: 28px;}
.font-32{ font-size: 32px;}

.show-pad, .show-phone{ display: none;}
.block{ display: block;}
.mb-0{ margin-bottom: 0;}
.mb-5{ margin-bottom: 5px;}
.mt-15{ margin-top: 15px;}
.mb-15{ margin-bottom: 15px;}
.mb-10{ margin-bottom: 10px;}
.mr-10{ margin-right: 10px;}
.mb-20{ margin-bottom: 20px;}
.mt-20{ margin-top: 20px;}
.mt-30{ margin-top: 30px;}
.mb-30{ margin-bottom: 30px;}

.youlianMw{    
background: url(../images/mw_logo_hover.png) no-repeat right center;color:#fff;
    padding-right: 92px;}
.youlianMw:hover{    
background: url(../images/mw_logo.png) no-repeat right center;color:#fff;
    padding-right: 92px;}
.pb-40{ padding-bottom: 40px;}

.text-ellipsis{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}

.scroll-top{ position: fixed; z-index: 99; bottom: 35px; right: 50px; width: 50px; height: 50px; opacity:0; -webkit-transform:translateX(100%) rotate(360deg); transform:translateX(100%) rotate(360deg); transition:all .5s ease; background: url(../images/btn-scrollTop.png) no-repeat 0 0; background-size: 100% 100%;}
.scroll-top.rollIn{ opacity:1; -webkit-transform:translateX(0px) rotate(0deg); transform:translateX(0px) rotate(0deg); transition:all .5s ease;}

/* Bounce To Right */
.bounce-to-right{ display: inline-block; position: relative; vertical-align: middle;
  -webkit-transform: translateZ(0); transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden;
  backface-visibility: hidden; -moz-osx-font-smoothing: grayscale;
  -webkit-transition-property: color; transition-property: color;
  -webkit-transition-duration: 0.5s; transition-duration: 0.5s;
}
.bounce-to-right:before{ content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: #1071c6;
  -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px;
  -webkit-transform: scaleX(0); transform: scaleX(0);
  -webkit-transform-origin: 0 50%; transform-origin: 0 50%;
  -webkit-transition-property: transform; transition-property: transform;
  -webkit-transition-duration: 0.5s; transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;
}
.bounce-to-right:hover, .bounce-to-right:focus, .bounce-to-right:active{ color: #fff;}
.bounce-to-right:hover:before, .bounce-to-right:focus:before, .bounce-to-right:active:before{
  -webkit-transform: scaleX(1); transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

/*======== header v5 Styles ===========*/
header{ position: absolute; z-index: 999; top: 0; width: 100%; /*background: url(../images/bg-header.jpg) no-repeat 0 0; background-size: 100% 100%;*/}
.header-crumb .hotline, .header-crumb .lang, .form-inline .btn-search, .aside li a{ padding-left: 25px; background: url(../images/sprite-index.png) no-repeat 0 0;}
.header-crumb{ height: 26px; font-size: 12px; color: #fff; line-height: 26px;}
.header-crumb a{ color: #fff;}
.header-crumb .hotline{ padding-left: 18px; margin: 0 28px 0 15px; background-position: 0 0;}
.header-crumb .lang{ margin-right: 8px;}
.header-crumb .lang-ch{ background-position: 0 -59px;}
.header-crumb .lang-en{ background-position: 0 -132px;}

.header-top{ padding: 8px 0 50px; color: #fff;}
.header-top h1.logo{ height: 60px; margin: 0; margin-left: 18px; vertical-align: middle;}
.form-inline{ width: 60%; margin-top: 12px;}
.form-inline .form-group{ width: 80%;}
.form-inline input.form-control{ width: 100%; height: 38px; line-height: 36px; font-size: 1.6rem; background: #fff;}
.form-inline .btn-blue{ width: 48px; height: 38px; padding: 0; margin-left: 8px; font-size: 1.6rem; color: #fff; line-height: 36px; background-color: #3294eb;}
.form-inline .btn-search{ background-position: center -342px;}

.nav-outer{ position: absolute; z-index: 999; top: 100px; left: 0; width: 100%; /*background: url(../images/bg-nav.jpg) no-repeat 0 0; background-size: 100% 100%;*/}
.navbar-nav{ float: none; width: 100%; background: #0e82e7;}
.nav>li{ width: 11%; height: 62px; margin-bottom: 0; text-align: center; background: url(../images/nav-line.png) no-repeat right center;}
.nav>li:last-child{ background: none;}
.nav>li>a{ display: inline-block; width: 100%; padding: 0; font-size: 16px; line-height: 62px; color: #fff; transition: all .2s ease-in-out;}
.nav>li>a:hover, .nav>li>a:focus, .nav>li.nav-hover>a, .nav>li.active>a{ color: #222; background: #fff;}
.nav-outer.fixedNav{ position:fixed; z-index:100000; top:0px; left:0px; width:100%; 
    _position:absolute; _top:expression(eval(document.documentElement.scrollTop));
}

/* footer */
footer{ color: #fff; background: #1465ac;}
.friend-link{ padding: 25px 0 20px; border-bottom: 1px solid #fff; margin-bottom: 12px;}
.friend-link .name{ font-size: 16px; color: #fff;}
.friend-link a{ margin: 0 4px; font-size: 14px; color: #fff;}
footer .logo{ height: 114px; line-height: 114px;}
footer .name{ margin-bottom: 8px; font-size: 1.8rem;}
footer .phone{ font-size: 3rem; line-height: 52px;}
footer .contact-list{ font-size: 12px; line-height: 20px;}
footer .tips{ font-size: 16px;}
.copyright{ padding: 4px 12px; font-size: 12px; background: #002c51;}
.copyright span{ margin-right: 10px;}


h3.title{ margin: 0 0 20px; font-size: 30px; line-height: 32px; color: #0e82e7; text-align: center;}
h3.title .line{ border-bottom: 1px solid #0e82e7;}
h3.title .title-inner{ position: relative; width: 215px; margin: -30px auto 0; background: #fff;}
h3.title .title-inner:after, h3.title .title-inner:before{ content: ""; display: block; position: absolute; top: 23px; width: 12px; height: 12px; background: #0e82e7;}
h3.title .title-inner:before{ right: 0;}
h3.title small{ display: block; font-size: 14px; line-height: 28px; color: #0e82e7; text-transform: uppercase;}
.bg-blue h3.title, .bg-blue h3.title small{ color: #fff;}
.bg-blue h3.title .line{ border-bottom-color: #fff;}
.bg-blue h3.title .title-inner{ background: #1071c6;}
.bg-blue h3.title .title-inner:after, .bg-blue h3.title .title-inner:before{ background: #fff;}

.btn-more{ display: block; width: 140px; height: 38px; border: 1px solid #1b8ef1; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; margin: 30px auto 0; line-height: 26px; color: #1b8ef1;}
.btn-orange{ color: #fe8417; border-color: #fe8417;}
.btn-orange.bounce-to-right:hover{ color: #fff;}
.btn-orange.bounce-to-right:before{ background: #fe8417;}
.bg-blue .btn-more{ float: right; margin-top: 12px; border-color: #fff; color: #fff;}
.bg-blue .btn-more.bounce-to-right:hover{ color: #0e82e7;}
.bg-blue .btn-more.bounce-to-right:before{ background: #fff;}
/* index-mod */
.index-mod{ padding: 68px 0 38px;}
.index-mod .pic{ margin-bottom: 10px;}
.index-mod img{ width: 100%; height: 100%;}

.index-contact{ padding-top: 24px; background: url(../images/bg-contact.jpg) no-repeat center 0; background-size: 100% 100%;}
.index-contact .title{ font-size: 65px; line-height: 80px; color: #0e82e7; text-align: right;}
.index-contact .subtitle{ font-size: 24px; font-weight: bold; line-height: 52px; color: #2294f7; text-align: right;}
.index-contact .aside-contact{ margin-left: 16px;}
.index-contact .aside-online{ margin: 20px 0 16px;}

.index-honor .pic-outer{ display: block; width: 100%; padding: 11px 0; margin-bottom: 18px; background: url(../images/bg-certificate.png) no-repeat 0 0; background-size: 100% 100%;}
.index-honor .pic{ margin: 0 10px; overflow: hidden;}
.index-honor .pic img{ width: 100%; height: 100%; transform: scale(1, 1); transition: all 0.5s ease-in-out;}
.index-honor a:hover img{ transform: scale(1.08, 1.08);}
.certificate .pic-outer{ margin-bottom: 8px;}

.index-about{ color: #fff; background: #0f6dc9;}
.index-about .detail{ margin-top: 8px;}
.index-about .pic{ float: left; width: 420px; height: 205px; margin-right: 12px;}

.photo-outer .pic{ position: relative;}
.photo-outer .pic-content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(0,0); transition: all 0.5s ease; background: url(../images/logo-footer.png) no-repeat center center rgba(0,71,133,.66); background-size: 150px 44px;}
.photo-outer a:hover .pic-content{ transform: scale(1,1); transition: all 0.5s ease;}

.index-news .pic{ width: 100%;}
.index-news .title{ height: 26px; color: #222;}
.index-news .date{ color: #999;}
.index-news .info{ height: 40px; font-size: 12px; color: #666; line-height: 20px; overflow: hidden;}
.index-news a:hover{ cursor: pointer;}
.index-news a:hover .title{ color: #1b8ef1;}

.index-case{ padding-top: 10px;}
.index-case .title-outer{ border-bottom: 2px solid #1b8ef1;}
.index-case .title{ width: 168px; height: 44px; font-size: 18px; color: #fff; line-height: 42px; background: #1b8ef1;}
.index-case .more{ width: 68px; height: 28px; margin-top: 8px; font-size: 12px; color: #fff; background: #ff8111;}
.index-case .more.bounce-to-right:before{ -moz-border-radius: 0; -webkit-border-radius: 0; -o-border-radius: 0; border-radius: 0;}
.index-case ul{ margin: 26px auto 0;}
.index-case li{ float: left; width: 10%; border: 1px solid #000; margin-right: 1%;}
.index-case li:first-child{ margin-left: 1%;}
.index-case li:last-child{ margin-right: 0;}
.index-case a{ display: block; padding: 1px; vertical-align: middle;}
.index-case li:hover{ border-color: #fe8417;}

.index-products img{ width: 100%; height: 100%;}
.index-products .pic{ border: 1px solid #d4d4d4; margin-bottom: 10px;}
.index-products a:hover .pic{ border: 2px solid #ff6f21;}
/*.index-case a img{ overflow: hidden; transform: scale(1,1,); transition: all 0.5s linear;}
.index-case a:hover img{ transform: scale(1.18, 1.18);}*/
/*.index-products{ min-height: 505px; padding: 0;}
.index-products .container{ position: relative;}
.index-products .aside{ position: absolute; z-index: 999; top: -100px; left: 0;}*/
.aside-contact, .aside-online{ width: 235px;}
.aside-contact{ margin: 20px 0 16px;}

.aside{ float: left; width: 240px;}
.aside h3.title, .aside h3.title small{ color: #fff;}
.aside h3.title{ padding: 20px 0; margin-bottom: 0; background-color: #0e82e7;}
.aside li{ margin-top: 5px;}
.aside li>a.target{ display: block; height: 45px; padding: 0 32px 0 15px; border: 1px solid #e7e7e7; font-size: 16px; color: #0159a5; line-height: 45px; background-position: 96% -188px; background-color: #fff; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.aside li.active>a.target, .aside li>a.current, .aside li>a.selected, .aside li>a.target:hover{ border-color: #0e82e7; color: #fff; background-color: #0e82e7; background-position: 96% -262px;}
.aside li>a.target.selected{ background-position: 96% -415px;}
.aside .sublist{ display: none; font-size: 14px;}
.aside .sublist li{ height: 32px; border: 1px solid #e7e7e7; border-top: 0 none; margin-top: 0; line-height: 32px;}
.aside .sublist a{ color: #666;}
.aside .sublist a:hover{ color: #0e82e7; background: none;}

.main{ padding: 0 24px; margin-left: 240px; /*background: #0e82e7;*/}
.main .name, .index-products .name{ height: 26px; margin-bottom: 12px; font-size: 14px; color: #222; text-align: center;}
.main a:hover .name, .index-products a:hover .name{ color: #fe8417;}

/*  ========== 内页 init =========  */
.init{ position: relative; width: 100%; margin: 20px 0 28px;}
.init .crumb-outer{ height: 40px; padding-bottom: 10px; border-bottom: 1px solid #d8d8d8; margin-bottom: 20px; line-height: 28px;}
.init .crumb{ float: right; padding-left: 20px; color: #666; background: url(../images/icon-home.png) no-repeat 0 center;}
.init .crumb a{ color: #666;}
.init .crumb a:hover{ color: #0e82e7;}
.init img{ max-width: 100%;}

.banner{ width: 100%; height: auto;}
.banner img{ width: 100%; height: 100%;}

.about .row-about{ margin-bottom: 15px;}
.about .pic{ margin: 0;}
.about .info-about{ display: table-cell; vertical-align: middle;}
.about .logo-init{ margin-bottom: 35px; text-align: center;}
.about .name{ font-size: 22px; color: #3e9ff3;}

.news-list a{ display: block; height: 156px; padding-bottom: 20px; border-bottom: 1px dashed #dfdfdf; margin-bottom: 20px;}
.news-list .pic{ float: left; position: relative; width: 220px; height: 134px; margin-right: 12px;}
.news-list .pic-content{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: scale(0,0); transition: all 0.5s ease; background: url(../images/logo-footer.png) no-repeat center center rgba(0,71,133,.66); background-size: 150px 44px;}
.news-list img{ width: 100%; height: 100%;}
.news-list .title{ height: 28px; font-size: 16px; color: #222;}
.news-list .date{ color: #999;}
.news-list .info{ height: 60px; font-size: 12px; line-height: 20px; color: #666; overflow : hidden; text-overflow: ellipsis;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.news-list a:hover .title{ color: #0e82e7;}
.news-list a:hover .pic-content{ transform: scale(1,1);}

.news-detail{ padding: 10px 0 40px;}
.news-detail .title{ margin-bottom: 15px; font-size: 24px; color: #515151;}
.news-detail .subtitle{ padding-bottom: 18px; border-bottom: 1px dashed #c2c2c2; margin-bottom: 18px; color: #717171;}
.news-detail .pic{ margin-bottom: 20px; text-align: center;}
.news-detail .info{ margin-bottom: 50px;}
.news-more a, .news-pagination .btn-back{ background: url(../images/sprite.png) no-repeat 0 -9999em;}
.news-more{ margin-bottom: 26px;}
.news-more .caption{ border: 0 none; margin-bottom: 12px; font-size: 20px;}
.news-more a{ display: block; height: 38px; padding-left: 20px; border-bottom: 1px dashed #dbdbdb; font-size: 16px; line-height: 38px; color: #616161; background-position: 0 10px;}
.news-more span{ float: right; font-size: 14px;}
.news-pagination{ position: relative; padding: 10px 18px 0 18px; border: 1px solid #cdcdcd; background: #f7f7f7;}
.news-pagination a{width: 68%; height: 26px; margin-bottom: 10px; font-size: 16px; color: #242424;}
.news-pagination span{ float: left; color: #616161;}
.news-pagination a:hover, .news-more a:hover{ color: #0e82e7;}
.news-pagination .btn-back{ position: absolute; top: 20px; right: 8px; width: 115px; height: 38px; padding-left: 36px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; font-size: 16px; color: #fff; line-height: 38px; background-position: 6px -38px; background-color: #fe8417;}
.news-pagination .btn-back:hover{ color: #fff;}

.recuit .news-list a{ height: auto;}

.case-list li{ float: left; width: 23%; margin: 0 1% 12px;}
.case-list a{ display: block;}
.case-list .pic{ border: 1px solid #d4d4d4; margin-bottom: 6px;}
.case-list img{ width: 100%; height: 100%;}
.case-list .name{ margin-bottom: 0;}
.case-list a:hover .pic{ border-color: #fe8417;}

.division{ height: 7px; margin: 12px 0; background: url(../images/division.png) repeat 0 0;}
.contact{ font-size: 12px; line-height: 20px; color: #646464;}
.contact .map{ width: 58%;}
.contact .info-contact{ width: 40%;}
.contact .logo-init{ margin-bottom: 12px; text-align: center;}
.contact .qrcode-outer .fl{ width: 48%;}
.contact .qrcode-outer .pic{ margin-bottom: 12px;}

.message-online{ padding: 0 30px;}
.form-horizontal .form-group{ position: relative; height: 38px;}
.form-horizontal .form-textarea{ height: 96px;}
.form-horizontal .control-label{ position: absolute; top: 0; left: 0; padding-top: 2px;}
.form-horizontal .form-control{ width: 60%; border-radius: 0; margin-left: 83px;}
.form-horizontal textarea.form-control{ width: 80%;}
.form-horizontal .form-control-vertify{ width: 170px;}
.form-horizontal img{ display: inline-block; border: 1px solid #bcbcbc; margin: 2px 0 0 8px;}
.form-horizontal .btn-submit{ width: 168px; height: 40px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; margin-left: 68px; font-size: 18px; color: #fff; background: #0e82e7;}

/* pagination */
.pagination, .pagination>li:first-child>a, .pagination>li:first-child>span, .pagination>li:last-child>a, .pagination>li:last-child>span{ -webkit-border-radius: 0; border-radius: 0;}
.pagination>li{ float: left; }
.pagination>li>a, .pagination>li>span{ color: #9e9e9e;}
.pagination>li:first-child>a, .pagination>li:first-child>span,
.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, 
.pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus,
.pagination>li>a:hover, .pagination>li>span:hover,
.pagination>li>a:focus, .pagination>li>span:focus
 { border-color: #ccc; font-weight: bold; color: #fff; background-color: #1c94da;}
/*.pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus{ color: #666; }*/


/* 响应式布局 */
@media (min-width: 1600px){
    header{ padding-top: 20px;}
    .nav-outer{ top: 130px;}
    .skitter .prev_button, .skitter .next_button{ bottom: 50%; margin-bottom: -180px;}
}
@media (min-width: 1200px){
    .container{ width: 1100px;}
}
@media screen and (max-width: 1200px){
    .carousel-wrap .prev, .carousel-wrap .prev_disabled{ left: -30px;}
    .carousel-wrap .next, .carousel-wrap .next_disabled{ right: -30px;}
    footer .phone{ font-size: 2.6rem;}
    .about .name{ font-size: 21px;}
}
@media (max-width: 991px){  
    .nav>li>a{ font-size: 16px;} 
    .header-crumb{ height: 52px;}
    /*.header-crumb .fr{ float: left;}*/
    .header-crumb .hotline{ margin: 0 5px;}
    .form-inline .form-group{ width: 75%;}

    .nav>li{ height: 50px;}
    .nav>li>a{ line-height: 50px;}

    .friend-link{ margin-bottom: 0;}
    footer .mb-20{ margin-bottom: 0;}
    footer .height-static{ padding: 12px 0; height: 158px; text-align: center;}
    footer .line-bottom{ border-bottom: 1px solid #0f5898;}
    footer .line-right{ border-right: 1px solid #0f5898;}

    .index-contact .title{ font-size: 60px;}

    .index-about .pic{ width: 280px; height: 136px;}
    .index-about .detail{ margin-top: 0;}


    .index-case li{ width: 19%; margin-bottom: 8px;}
    .index-case li:first-child{ margin-left: 0;}

    /* init */
    .about .logo-init{ margin-bottom: 18px;}
    .about .name{ margin-bottom: 6px; font-size: 17px;}

    .contact .info-contact, .contact .map, .contact .map img{ float: none; width: 100%;}
    .contact .info-contact{ margin-bottom: 10px;}
    .contact .logo-init{ margin-bottom: 20px;}
}

@media (max-width: 767px){
    .hide-pad, .aside-catagory .title span.hide-pad{ display: none;}
    .show-pad{ display: block;}

    .body-pt{ padding-top: 68px; padding-bottom: 54px;}
    .scroll-top{ bottom: 80px; right: 20px;}
    .header{ position: fixed; top: 0; left: 0; z-index: 99; width: 100%; height: 58px; background: #fff;}
    /*.fixedNav{ top: 82px;}*/
    .header h1.logo{ float: left; margin: 2px 0;}
    .header h1.logo img{ width: 80%;}
    .nav-outer{ background: #fff;}
    .nav-mask{ position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; background: rgba(0,0,0,.38);}
    .navbar-toggle .icon-bar, .navbar-collapse{ background-color: #0e82e7;}
    .nav-outer.navbar-collapse{ position: fixed; z-index: 9999; left: auto; right: -50%; top: 0; width: 50%; padding: 0; text-align: center;}
    .navbar-nav{ margin: 20px 0 0;}
    .navbar-toggle{ padding: 8px; border: 1px solid #0e82e7; margin-top: 12px; margin-right: 0;}

    .nav>li{ width: 100%; height: auto; border-bottom: 1px solid #007ae5; margin-bottom: 0; line-height: 32px; background: none;}
    .navbar-nav>li>a{ height: 38px; line-height: 38px; color: #fff;}
    .nav>li>a:hover, .nav>li>a:focus, .nav>li.nav-hover>a, .nav>li.active>a{ color: #fff; background: none;}
    
    .navigation{ clear:both; position:fixed; bottom:0px; left:0px; z-index:99; width:100%; background:#0e82e7;}
    .navigation li{width:20%; text-align:center; border-right:#0d6abc 1px solid; padding:5px 0px; float:left;}
    .navigation li img{ height:20px;}
    .navigation li span{ display: block; color:#fff; line-height:18px; font-size:0.8em;}

    .copyright span{ display: block;}

    .index-mod{ padding: 50px 0 20px;}
    .btn-more{ margin-top: 5px;}

    .index-contact .title{ font-size: 38px;}
    .index-contact .subtitle{ font-size: 15px;}
    .index-contact .aside-contact, .index-contact .aside-online{ width: 200px;}
   
    .index-news a{ margin-bottom: 20px;}

    .banner{ margin-top: -50px;}
    .photo-outer .pic-content{ background-size: 90px 26px;}
    
    /*.index-products{ padding: 0;}*/
    .aside{ position: fixed; z-index: 9; top: auto; bottom: 70px; left: 10px; width: auto;}
    .aside h3.title{ width: 68px; height: 68px; padding: 10px 8px; border-radius: 50%; font-size: 18px; line-height: 24px; cursor: pointer;}
    .aside h3.title small{ display: none;}
    .aside-nav{ display: none; position: fixed; z-index: 99; bottom: 66px; left: 90px; width: 200px; background: #fff;}
    .aside-nav:before{ content: ''; display: block; position: fixed; left: 66px; bottom: 86px; border: 12px solid transparent; border-right-color: #fff;}
    .main{ padding: 0; margin: 0;}
    .init .crumb{ float: none;}

    .index-products .row, .index-honor .row{ margin: 0 -5px;}
    .index-products .col-xs-4, .index-honor .col-xs-4{ padding-right: 5px; padding-left: 5px;}

    .index-case{ padding-top: 0;}
    /* init */
    .init .crumb{ padding-right: 0;}
    nav.text-right{ text-align: center;}
    .pagination{ margin: 15px 0 0;}
    .pagination li{ margin-bottom: 8px;}

    .contact li{ float: left; width: 50%;}
}


@media (max-width: 480px){
    .wrap-xs{ width: 100%; overflow: hidden;}
    .hide-xs{ display: none;}
    .show-phone{ display: block;}

    .scroll-top{ right: 10px;}

    body, .body-pt{ padding-top: 50px;}
    .header{ height: 50px;}
    .header h1.logo{ margin: 0px 0 0;}
    .header h1.logo img{ width: 58%;}
    .navbar-toggle{ margin-top: 12px;}
 
    .carousel-indicators{ bottom: 0;}
    .carousel-indicators li, .carousel-indicators .active{ width: 12px; height: 12px; margin: 0 4px;}
    .carousel-control.left, .carousel-control.right{ background-size: 30px 66px;}

    /*.friend-link{ border-bottom: 1px solid #002c51;}*/
    footer .height-static{ width: 100%; height: auto; border: 0 none; border-bottom: 1px solid #0f5898;}
    h3.title{ font-size: 26px;}

    .index-contact{ padding-top: 24px;}
    .index-contact .title, .index-contact .subtitle{ text-align: center;}
    .index-contact .title{ font-size: 27px; line-height: 58px;}
    .index-contact .subtitle{ line-height: 24px;}
    .index-contact .aside-contact, .index-contact .aside-online{ float: none; margin: 20px auto 0;}

    .index-about .pic{ float: none; width: 100%; height: auto; margin: 0 0 12px;}
    .index-news a{ width: 100%; margin-bottom: 20px;}

    .banner{ margin-top: -30px;}

    .about .info-about{ display: block; margin: 20px auto 0; text-align: center;}
    .row-about .col-xs-6{ width: 100%;}

    .contact li{ float: none; width: 100%;}

    .form-horizontal textarea.form-control{ width: 68%;}

    .news-list a{ height: auto;}
    /*.news-list .pic{ width: 178px; height: 108px;}*/
    .news-list .pic{ width: 138px; height: 84px;}
    .news-list .title{ margin-top: -6px;}
    .news-list .info{ height: 40px;}

    .news-detail{ padding-bottom: 68px;}
    .news-detail .title{ font-size: 20px;}
    .news-detail .info{ margin-bottom: 20px;}
    .news-more .caption{ margin-bottom: 10px;}
    .news-pagination a{ width: 100%;}
    .news-pagination .btn-back{ top: auto; right: auto; left: 0; bottom: -60px;}

    .case-list li{ width: 31%;}
}

@media (max-width: 375px){
    .photo-outer .pic-content{ background-size: 60px 17px;}
    .index-honor .pic-outer{ padding: 8px 0;}
    .index-honor .pic{ margin: 0 8px;}
}

@media (max-width: 320px){
    .banner{ margin-top: -20px;}
    .aside-nav{ width: 200px;}
    .news-list .pic{ float: none; width: 100%; height: auto; margin-bottom: 12px;}
    .news-detail .date span{ display: block;}
}